<template>
  <div class="pageContent">
    <div style="margin-top: 20px;margin-bottom: 20px">
      <el-button type="primary" style="margin-top: 10px" @click="handleClick()">上传数据</el-button>
      <!--      <el-button @click="toggleSelection([tableData[1], tableData[2]])">切换第二、第三行的选中状态</el-button>-->
      <el-button @click="toggleSelection()">取消选择</el-button>
      <el-button type="danger" @click="batchDelete()">删除所选</el-button>

    </div>
    <!--表格内容-->
    <el-table ref="multipleTable" :data="tableData" @selection-change="handleSelectionChange" stripe style="width: 100%">
      <el-table-column
          prop="checkbox"
          type="selection"
          label="选择"
          width="50"
          align="center">
      </el-table-column>
      <el-table-column prop="index" type="index" width="150" align="center" :index="indexPageChange"></el-table-column>
      <el-table-column prop="id" label="订单id" width="150" header-align="center" align="center"></el-table-column>

      <el-table-column prop="orderTime" label="下单时间" width="200" header-align="center" align="center"></el-table-column>
      <el-table-column prop="total" label="数量" width="150" height="400" align="center">
        <!--          <img :src="row.photo" alt=""/>-->
        <!--        <el-avatar :src="row.photo"></el-avatar>-->

      </el-table-column>
      <el-table-column prop="status" label="状态" width="200"  align="center" ></el-table-column>
      <el-table-column prop="remark" label="备注" width="100" align="center"></el-table-column>
      <el-table-column prop="customerId" label="顾客" width="100" align="center"></el-table-column>

      <!--      <el-table-column prop="photo" label="照片" width="200" align="center"></el-table-column>-->
      <el-table-column prop="waiterId" label="雇员" width="100" align="center"></el-table-column>

      <el-table-column prop="addressId" label="操作" width="100" align="center">
        <template slot-scope="scope">
          <!--          <el-button @click="handleClick(scope.row)" type="text" size="small">查看详情</el-button>-->
          <!--          <el-button type="success" size="mini" @click="getDetails(scope.row)">查看</el-button>-->
          <el-button type="success" size="mini" @click="update(scope.row)">编辑</el-button>
        </template>
      </el-table-column>
      <el-table-column>
        <template slot-scope="scope">
          <el-input v-model="waiterId"></el-input>
          <el-button type="primary" size="mini" @click="deliver(scope.row)">派单</el-button>
        </template>
      </el-table-column>
    </el-table>
    <addorder></addorder>
  </div>
</template>

<script>
import addorder from "../updateDialog/addorder";
import qs from 'qs'
import $URL from "../../util/url";

export default {
  data() {
    return {
      pageSize: 10,
      currentPage: 1,
      multipleSelection: [],
      waiterId:''
    }
  },
  props: ['tableData'],
  components:{
    addorder
  },
  methods:{


    //分页序号再计算
    indexPageChange(index){
      return index+1+(this.currentPage-1)*this.pageSize
    },
    deleteData(row){
      let that=this
      // let needURL=deleteDataURLlist[that.typevalue]+dataId
      let dataId = row.id
      console.log(row.id)
      let needURL=that.$URL.deleteorder+'?id='+dataId
      console.log(needURL)
      that.$axios.get(needURL,"").then(
          res => {
            if (res.status == 500){
              that.$message({
                message: "删除订单不存在",
                type: 'warning'
              });
            }
            else if(res.status == 200){
              that.$message({
                message: "删除成功",
                type: 'success'
              })
              that.tableData.length=0
              that.searchAll()
            }
          }
      )
    },

    handleClick(row){
      this.$Bus.$emit('addorder',{
        infoData:row,
        dialogVisible:true
      })
    },

    update(row){
      this.$Bus.$emit('addorder',{
        infoData:row,
        dialogVisible:true
      })
    },

    toggleSelection(rows) {
      if (rows) {
        rows.forEach(row => {
          this.$refs.multipleTable.toggleRowSelection(row);
        });
      } else {
        this.$refs.multipleTable.clearSelection();
      }
    },
    handleSelectionChange(val) {
      let listId=[]
      for (let item of val){
        listId.push(item.id)
      }
      console.log(listId)
      this.multipleSelection=listId
      console.log(this.multipleSelection)
    },

    batchDelete(){
      let that=this;
      let batchDeleteUrl = that.$URL.batchDeleteorder
      let listDelete=[]
      for (let i of that.multipleSelection){
        listDelete.push(i)
      }
      console.log(listDelete)

      let parm1 = qs.stringify({
        ids:listDelete,
      }, { indices: false });

      console.log(parm1)

      that.$axios.post(batchDeleteUrl,parm1).then(
          res => {
            if (res.status == 500){
              that.$message({
                message: "删除失败",
                type: 'warning'
              });
            }
            else if(res.status == 200){
              that.$message({
                message: "删除成功",
                type: 'success'
              })
              that.tableData.length=0
              that.searchAll()
            }
          }
      )
    },

    deliver(row){
      let that = this
      let orderId = row.id
      let waiterId = this.waiterId
      let url = that.$URL.sendorder+"?waiterId="+waiterId+"&orderId="+orderId
      console.log(url)
      that.$axios.get(url).then(
          res => {
            if (res.status == 500){
              that.$message({
                message: res.message,
                type: 'warning'
              });
            }
            else if(res.status == 200){
              that.$message({
                message: "派单成功",
                type: 'success'
              })
            }
          }
      )
    }

  }
}
</script>

<style>
.pageContent{
  margin-top: 10px;
  margin-left: 30px;
}
</style>
